<template>
    <view class="orderApproval">
        <uni-nav-bar fixed left-icon="left" title="订单审批" @clickLeft="backHandle" class="unibarS">
        </uni-nav-bar>
        <!-- <view class="tab-box">
            <u-tabs :list="list1" @click="clickTabs"></u-tabs>
        </view> -->
        <uni-search-bar v-model="params.keyword" class="uni-mt-10" bgColor="#FFFFFF" radius="5" placeholder="搜索" clearButton="auto"
            cancelButton="none" @confirm="searchHandle()" @clear="searchHandle()" />
        <view v-if="list.length" class="list">
            <view class="item" v-for="(item, index) in list" :key="index" @click="goOrderDetails(item)">
                <view class="item-top">
                    <view class="item-top-left">
                        <view class="name">当前环节：{{ item.taskAssignShow }}</view>
                        <view class="rate" style="margin-bottom: 26rpx;">业务编号：{{ item.bizCode }}</view>
                        <view class="time">发起时间：{{ item.startTime }}</view>
                    </view>
                    <view class="item-top-right">
                        <!-- <view class="state">状态</view> -->
                        <view style="text-align: center;">
                            <u-avatar :src="baseUrl + item.rootUserAvatarUrl"></u-avatar>
                            <view class="salesman">{{ item.rootUserName }}</view>
                        </view>
                    </view>
                </view>
            </view>
            <uni-load-more :status="status" />
        </view>
        <empty-view v-else></empty-view>
    </view>
</template>

<script>
import { convertToDict } from '@/common/utils'
export default {
    data() {
        return {
            baseUrl: '',
            params: {
                processName : '订单审批',
				keyword: '',
				pageNum: 1,
				pageSize: 20
			},
            total: 0,
			status: 'loading',
			refresh: false,
			list: [],
            list1: [
                { name: '待审批', type: 1001 },
                { name: '审批通过', type: 1002 },
                { name: '审批拒绝', type: 1003 }
            ]
        }
    },
    onLoad() {
        this.baseUrl = this.$http.baseUrl
        this.bus_examine_status = convertToDict(JSON.parse(uni.getStorageSync('bus_examine_status')))
		this.getData()
	},
    onReachBottom() {
		console.log('上拉加载onReachBottom')
		if (this.status == 'noMore' || this.status == 'loading') return
		this.params.pageNum = this.params.pageNum + 1
		this.status = 'loading'
		this.getData()
	},
    methods: {
        getData() {
			this.$http.post('/flyflow-api/combination/group/queryTodoTaskList', this.params, false).then(res => {
                console.log(res)
				if (res.data.ok) {
                    if(res.data.data.records) {
                        this.list = [...this.list, ...res.data.data.records]
                        this.total = res.data.data.total
                        if (this.total > this.list.length) {
                            this.status = 'more'
                        } else {
                            this.status = 'noMore'
                        }
                    } else {
                        this.total = 0
                        this.status = 'noMore'
                    }

					if (this.refresh) {
						uni.stopPullDownRefresh()
					}
				} else {
					uni.$u.toast(res.msg)
				}
			})
		},
        addOrder() {
            uni.navigateTo({
                url: '/pages/order/addOrder'
            });
        },
		searchHandle() {
			this.params.pageNum = 1
			this.status = 'loading'
			this.list = []
			this.getData()
		},
        clickTabs(item) {
            this.params.auditStatus = item.type
            this.searchHandle()
        },
        seeMoney() {
            this.$refs.popup.open()
        },
        closePopup() {
            this.$refs.popup.close()
        },
        goOrderDetails(item) {
            uni.navigateTo({
                url: '/pages/examine/newApprovalDetails?id=' + item.bizCode + '&taskId=' + item.taskId
            });
            // uni.navigateTo({
            //     url: '/pages/examine/orderApprovalDetails?id=' + item.id
            // });
        },
        backHandle() {
            uni.navigateBack()
        }
    }
}
</script>

<style lang="scss" scoped>

.orderApproval {
    .tab-box {
        background: #fff;

    }
}

.item {
    padding: 32rpx;
    border-radius: 24rpx;
    background: rgba(255, 255, 255, 1);
    margin-bottom: 20rpx;

    .item-top {
        display: flex;
        justify-content: space-between;
        align-items: center;

        .item-top-left {
            flex: 1;
            margin-right: 20rpx;
            width: 0;

            .name {
                font-size: 32rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                margin-bottom: 32rpx;
                // 超出显示省略号
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }

            .rate,
            .time {
                font-size: 28rpx;
                font-weight: 400;
                color: rgba(103, 117, 133, 1);
            }
        }

        .item-top-right {
            // width: 200rpx;
            display: flex;
            flex-direction: column;
            justify-content: center;
            // align-items: flex-end;
            // text-align: right;

            .state {
                font-size: 24rpx;
                font-weight: 400;
                // color: rgba(0, 186, 173, 1);
                margin-bottom: 20rpx;
            }

            .salesman {
                margin-top: 8rpx;
                font-size: 28rpx;
                font-weight: 500;
                color: rgba(12, 16, 25, 1);
                width: 100%;
                // 超出隐藏
                overflow: hidden;
                text-overflow: ellipsis;
                white-space: nowrap;
            }
        }
    }
}

.bottom-box {
    height: 44px;
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 1);
    box-shadow: 0px 0px 12rpx rgba(0, 0, 0, 0.1);

    text {
        font-size: 28rpx;
        font-weight: 500;
        color: rgba(77, 172, 177, 1);
    }

}

.popup-box {
    padding: 32rpx 0;

    .popup-header {
        display: flex;
        justify-content: center;
        margin-bottom: 32rpx;
    }
    .popup-content {
        padding: 0 32rpx;
        > view {
            display: flex;
            justify-content: space-between;
            margin-bottom: 32rpx;
            .price {
                color: rgba(255, 0, 28, 1);
            }
        }
    }
    .popup-footer {
        padding: 0 32rpx;
    }
}
</style>